<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 头部-begin -->
        <tree-row
          :node-data="company"
          :root="true"
          @add-depts="handleAddDept"
        />
        <!-- 头部-end -->
        <!-- 内容-begin -->
        <el-tree
          :data="departs"
          :props="{label: 'name'}"
          default-expand-all
        >
          <!-- 作用域插槽: 自己自定义树形结构 -->
          <template #default="{data}">
            <tree-row
              :node-data="data"
              @del-depts="getDepartments"
              @add-depts="handleAddDept"
              @edit-depts="handleEditDept"
            />
          </template>
        </el-tree>
        <!-- 内容-end -->
      </el-card>

      <!-- 添加组件 -->
      <!--
         :is-show.sync
         - 父组件已经放权让你可以以固定的方式去直接修改isShow属性的属性值
         - 在子组件中一旦修改了isShow属性的属性值, 会同步影响到父组件中isShowAddDept属性的属性值

         删除之前注册的自定义事件:
          @closeDialog="handleCloseDialog"
       -->
      <add-dept
        ref="addDept"
        :is-show.sync="isShowAddDept"
        :depts-list="deptsList"
        :node-data="nodeData"
        @addDept="getDepartments"
      />
    </div>
  </div>
</template>

<script>
// 引入子组件
import TreeRow from './components/TreeRow.vue'
import AddDept from './components/AddDept.vue'
// 引入接口函数
import { reqGetDepartments } from '@/api/department'
// 引入工具函数
import { tranListToTreeData } from '@/utils'

export default {
  name: 'Departments',
  components: {
    TreeRow,
    AddDept
  },
  data() {
    return {
      // 1. 树形组件的数据源数组(树形数组)
      departs: [],
      // 2. 公司信息
      company: { name: '', manager: '负责人' },
      // 3. 控制添加组件的显示和隐藏
      isShowAddDept: false,
      // 4. 添加子部门对应的父级部门的数据
      nodeData: {},
      // 5. 部门完整的数据数组(对象数组)
      deptsList: [],
      // 6. 控制加载
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 1. 获取部分的数据
    async getDepartments() {
      this.loading = true

      // 1.1 发起请求
      const { data: { companyName, depts }} = await reqGetDepartments()
      // console.log(companyName, depts)
      // 1.2 处理公司的名称和id
      this.company.name = companyName
      this.company.id = ''
      // 1.3 把对象数组转成树形数组
      this.departs = tranListToTreeData(depts, '')
      // 1.4 记录对象数组
      this.deptsList = depts

      this.loading = false
    },
    // 2. 关闭添加弹层
    // handleCloseDialog(flag) {
    //   // 2.1 修改属性值
    //   this.isShowAddDept = flag
    // },
    // 3. 处理添加业务
    handleAddDept(nodeData) {
      // 3.1 让添加弹层展示
      this.isShowAddDept = true
      // 3.2 记录父级部门的数据
      this.nodeData = nodeData
      // 3.3 调用子组件中的函数发起请求
      // this.$refs.addDept.getSimpleUserList()
      // 3.4 修改子组件的标题
      // this.$refs.addDept.dialogTitle = '添加子部门'
    },
    // 4. 处理编辑业务
    handleEditDept(nodeData) {
      // 4.1 让添加弹层展示
      this.isShowAddDept = true
      // 4.2 记录父级部门的数据
      this.nodeData = nodeData
      // 4.3 修改子组件的标题
      // this.$refs.addDept.dialogTitle = '编辑部门'
      // 4.4 调用子组件的函数获取部门详情数据进行回显操作
      this.$refs.addDept.getDeptDetail(nodeData.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
